<template>
  <el-container style="min-height: 100vh">
    <el-aside :width="sideWidth + 'px'"
              style="background-color: rgb(238, 241, 246); box-shadow: 2px 0 6px rgb(0 21 41 / 35%);">
      <Aside :isCollapse="isCollapse" @router-jump="routerJump"/>
    </el-aside>

    <el-container>
      <el-header style="border-bottom: 1px solid #ccc;">
        <Header :collapseBtnClass="collapseBtnClass" :nickname="nickname" :collapse="collapse" :exit="exit"/>
      </el-header>

      <el-main style="padding: 0px;">
        <!--        表示当前页面的子路由会在RouterView中展示-->
        <!--        <router-view/>-->
        <el-tabs v-model="editableTabsValue" type="card" @tab-remove="removeTab" @tab-click="handleClick">
          <el-tab-pane
              v-for="item in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
              :closable="item.name !== '主页'"
          >
            <router-view/>
          </el-tab-pane>
        </el-tabs>
      </el-main>

    </el-container>
  </el-container>
</template>

<script>

import Aside from "@/components/Aside";
import Header from "@/components/Header";

export default {
  name: 'Home',
  components: {
    Header,
    Aside
  },
  mounted() {

  },
  data() {
    return {
      collapseBtnClass: 'el-icon-s-fold',
      isCollapse: false,
      sideWidth: 200,
      nickname: '',
      editableTabsValue: '主页',
      editableTabs: [{
        title: '主页',
        name: '主页',
        url: ''
      }]
    }
  },
  created() {
    this.nickname = JSON.parse(localStorage.getItem('user')).nickname
    if (this.editableTabs.length === 1) {
      this.handleClick(this.editableTabs[0])
    }
  },
  methods: {
    exit() {
      localStorage.removeItem('user')
      this.$message.success('退出成功');
      this.$router.push({path: "/login"})
    },
    //收缩左边列表
    collapse() {  // 点击收缩按钮触发
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {  // 收缩
        this.sideWidth = 64
        this.collapseBtnClass = 'el-icon-s-unfold'
      } else {   // 展开
        this.sideWidth = 200
        this.collapseBtnClass = 'el-icon-s-fold'
      }
    },
    routerJump(data) {
      let newTabName = data.name;
      if (this.editableTabs.filter(e => e.name === newTabName).length === 0) {
        this.editableTabs.push({title: newTabName, name: newTabName, url: data.url});
      }
      this.editableTabsValue = newTabName;
    },
    handleClick (table, event) {
      this.$router.push({
        path: '/' + this.editableTabs.filter(e => e.name === table.name)[0].url
      })
    },
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      let activeTab = null;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            console.log(tabs[index + 1] || tabs[index - 1]);
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
              activeTab = nextTab;
            }
          }
        });
      }
      this.editableTabsValue = activeName;
      this.handleClick(activeTab);
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    }
  }
}
</script>